<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>HTML+CSS 社交按钮鼠标悬停效果</title>
		<!-- 提前引入的图标库 放在简介中 -->
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
		/>
		<!-- 核心样式 -->
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div class="container">
			<a href="javascript:void(0)" class="btn btn_facebook"
				><i class="fa fa-facebook"></i
			></a>
			<a href="javascript:void(0)" class="btn btn_twitter"
				><i class="fa fa-twitter"></i
			></a>
			<a href="javascript:void(0)" class="btn btn_google"
				><i class="fa fa-google"></i
			></a>
			<a href="javascript:void(0)" class="btn btn_instagram"
				><i class="fa fa-instagram"></i
			></a>
			<a href="javascript:void(0)" class="btn btn_pinterest"
				><i class="fa fa-pinterest"></i
			></a>
		</div>
	</body>
</html>
